import React from "./core/react.js";

// const App = React.createElement("div", { id: "app" }, "Hello mini-react");

// let count = 0;
// let showBar = false;
// cunction compontents
// function Count({ num }) {
//   const foo = (
//     <div>
//       foo
//       <div>foo.child div</div>
//       <p>foo.child p</p>
//     </div>
//   );
//   // function Foo() {
//   //   return <div>foo</div>;
//   // }
//   const bar = <div>bar</div>;

//   function click() {
//     console.log("click");
//     count++;
//     showBar = !showBar;
//     // debugger;
//     update();
//   }
//   return (
//     <div>
//       count: {count}
//       <button onClick={click}>Click</button>
//       <div>{showBar ? bar : foo}</div>
//       {/* <div>{showBar ? bar : <Foo></Foo>}</div> */}
//     </div>
//   );
// }

// edge case
// function Count() {
//   const bar = <div>bar</div>;

//   function handleShowBar() {
//     showBar = !showBar;
//     React.update();
//   }

//   return (
//     <div>
//       Count
//       {showBar && bar}
//       <button onclick={handleShowBar}>show bar </button>
//     </div>
//   );
// }

// function App() {
//   return (
//     <div>
//       mini-react
//       <Count></Count>
//     </div>
//   );
// }

// useStatus
// let countFoo = 1;
// function Foo() {
//   const update = React.update();
//   console.log("foo return");
//   function handleClick() {
//     countFoo++;
//     update();
//   }

//   return (
//     <div>
//       <h1>foo</h1>
//       {countFoo}
//       <button onClick={handleClick}>click</button>
//     </div>
//   );
// }
function Foo() {
  console.log("create Foo");
  const [count, setCount] = React.useState(10);
  const [name, setName] = React.useState("foo");

  function handleClick() {
    setCount((state) => state + 1);
    // // setName((state) => state + " foo");
    // setName("hello use state");
    setName("just once");
  }

  React.useEffect(() => {
    console.log("mounte Foo");

    return () => {
      console.log("should be only once");
    };
  }, []);
  React.useEffect(() => {
    console.log("count chagne", count);

    // 删除副作用
    return () => {
      console.log("删除副作用1");
    };
  }, []);

  React.useEffect(() => {
    console.log("count chagne", count);

    // 删除副作用
    return () => {
      console.log("删除副作用2");
    };
  }, [count]);

  return (
    <div>
      <h1>foo</h1>
      <div>{count}</div>
      <div>{name}</div>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

let countBar = 1;
function Bar() {
  // console.log("bar return");
  const update = React.update();
  function handleClick() {
    countBar++;
    update();
  }

  React.useEffect(() => {
    console.log("count chagne", countBar);

    // 删除副作用
    return () => {
      console.log("Bar副作用1");
    };
  }, [countBar]);

  return (
    <div>
      <h1>bar</h1>
      {countBar}
      <button onClick={handleClick}>click</button>
    </div>
  );
}

let countRoot = 0;
function App() {
  // console.log("app return");
  const update = React.update();
  function handleClick() {
    countRoot++;
    update();
  }

  return (
    <div>
      hi-mini-react count:
      {countRoot}
      <button onClick={handleClick}>click</button>
      <Foo></Foo>
      <Bar></Bar>
    </div>
  );
}
export default App;
